<template>
    <div id="find">
      <tab-bar :class="{item1Active:item1,toggleColor:navToggle}">
        <tab-bar-item  path="/find/classify" font-size="1.2rem">
          <div  slot="item-text">{{tit[0]}}</div>
        </tab-bar-item>
        <tab-bar-item path="/find/free" active-color="white"  font-size="1.2rem">
          <div slot="item-text">{{tit[1]}}</div>
        </tab-bar-item>
        <tab-bar-item  path="/find/villain" active-color="white" font-size="1.2rem">
          <div slot="item-text">{{tit[2]}}</div>
        </tab-bar-item>
        <tab-bar-item  path="/find/original" font-size="1.2rem" active-color="white">
          <div slot="item-text">{{tit[3]}}</div>
        </tab-bar-item>
      </tab-bar>
      <img class="hot-img" src="../../assets/imgs/homePage/放大镜.png" alt=""  @click="search">
      <transition :name="transitionName">
        <keep-alive>
          <router-view  class="child-view"></router-view>
        </keep-alive>
      </transition>
    </div>
</template>

<script>
  import TabBar from '../../components/tabbar/TabBar'
  import TabBarItem from '../../components/tabbar/TabBarItem'
    export default {
        name: "Find",
        components: {TabBar,
        TabBarItem},
      data(){
          return{
            transitionName: '',
            keepPath:'/find/classify',
            tit:['分类','免费','反派VS主角','热番原作'],
            navToggle:false
          }
      },
      watch: {
        '$route'(to, from) {
          if(to.meta.index > from.meta.index){
            this.transitionName = 'slide-left';
          }else{
            this.transitionName = 'slide-right';
          }
        }
      },
      mounted () {

      },
      computed:{
        item1(){
          if(this.$route.path.indexOf('/find/classify')!==-1){
            return true
          }else{
            return false
          }
        }
      },
      activated(){  //homepage活跃时
        // console.log('activated');
        if(this.$route.path!=this.keepPath){//解决在首页刷新重复添加路由报错的问题
          this.$router.push(this.keepPath)
        }
        //滚动条事件监听
        window.addEventListener('scroll', this.handleScroll)
      },
      deactivated(){
          //离开此页面时摧毁事件监听
        window.removeEventListener('scroll', this.handleScroll)
      },
      beforeRouteLeave(to,from,next){   //离开此路由之前 保留切换tabbar之前的路由
        this.keepPath = this.$route.path
        // console.log('befor',this.keepPath);
        next()
      },
      methods:{
          //监听滚动条位置
        handleScroll (e) {
          var top = document.documentElement.scrollTop
          // console.log(document.documentElement.scrollTop)
          if(top>10){
            this.navToggle = true
          }else{
            this.navToggle = false
          }
        },
        search(){
          console.log('1');
          this.$router.push({'path': '/search'})
        }
      }
    }
</script>

<style lang="less">
@import "../../assets/css/find/find";
</style>
